<template>
  <div class="recommend">
    <VideoCard :videoData="videoList" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Recommend',
});
</script>

<script setup lang="ts">
import VideoCard from '@/components/VideoCard/index.vue';
import { onMounted, ref } from 'vue';
import { ElLoading } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useResourceStore } from '@/store/resource';
const resourceStore = useResourceStore();
const { videoList } = storeToRefs(resourceStore);
const { getRecommend } = resourceStore;
const pageNum = ref(1);
onMounted(async () => {
  ElLoading.service({ fullscreen: true });
  await getRecommend(pageNum.value, 20);
  ElLoading.service({ fullscreen: true }).close();
});
</script>
<style scoped lang="less"></style>
